<!--销售品实例-->
<template>
  <div class="sale-case-box">
    <el-form
      class="clearfix"
      ref="myCusterFormRef"
      :model="Form"
      label-position="left"
      label-width="1rem"
    >
      <sim-form
        ref="simForm"
        :colspan="8"
        :Form="Form"
        isbtn
        @queryMethods="getQryAssetDetail"
      ></sim-form>
    </el-form>
    <!--批量改单-->
    <dic-popover
      :config="morePopConfig"
      class="plbg"
      :row="moreRow"
    ></dic-popover>
    <DicTable
      ref="carordertable"
      stripe
      highlight-current-row
      highlight-hover-row
      border
      header-row-class-name="header-row-class"
      row-class-name="ne-row-class"
      :columnData="Dctbs.tableColumns"
      :tableData="Dctbs.tableData"
      :loading="Dctbs.tableLoading"
      :currentPage="Dctbs.tablePage.currentPage"
      :pageSize="Dctbs.tablePage.pageSize"
      :totalResult="Dctbs.tablePage.totalResult"
      :pager="true"
      :table-tooltip-config="{
        showAll: true,
        contentMethod: showTooltipMethod,
      }"
      @on-page-change="handlePageChange"
      @cell-click="Onrowclick"
      @checked-data="checkBoxdata"
      resizable
    >
      <template #operation="{ row }">
        <div class="clearfix operation">
          <div class="position">
            <dic-popover :config="popConfig" :row="row"></dic-popover>
          </div>
        </div>
      </template>

      <template #beginRentDate="{ row }">
        <span>{{ row.beginRentDate  ? timestampToTime(row.beginRentDate) : '' }}</span>
      </template>
    </DicTable>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import CommonUtil from "@/utils/common";
import OrderService from "@/api/order/OrderService.js";
import SimForm from "@/components/public/SimForm";
import DicPopover from "@/components/order/PopoVer";
import { mapState, mapGetters } from "vuex";
export default {
  name: "saleCase",
  props: {},
  data() {
    return {
      Form: {
        /**
         * type类型
         *         jmIpt精确模糊 input
         *         Ipt普通 input
         *         select 选择框
         *
         */
        //订单流水号  待定 ，显示是受理流水
        custSoNumber: {
          type: "jmIpt",
          cName: "订单流水号",
          cValue: "",
          oValue: 0,
          opt: [
            { label: "精确", value: 0 },
            { label: "模糊", value: 1 },
          ],
        },
        // 设备号
        accNums: {
          type: "jmgIpt",
          cName: "设备号",
          cValue: "",
          oValue: 0,
          opt: [
            { label: "精确", value: 0 },
            { label: "模糊", value: 1 },
          ],
        },
        // 接入号
        accounts: {
          type: "jmIpt",
          cName: "接入号",
          cValue: "",
          oValue: 0,
          opt: [
            { label: "精确", value: 0 },
            { label: "模糊", value: 1 },
          ],
        },
        // 产品类型
        prodId: {
          type: "select",
          cName: "产品类型",
          cValue: "",
          filterable: true,
          opt: [{ label: "", value: "" }],
        },
        //IDC群号
        groupNbr: {
          type: "Ipt",
          cName: "IDC群号",
          cValue: "",
        },
        // 合同是否到期
        ifContractExpireFlag: {
          type: "select",
          cName: "合同是否到期",
          cValue: "",
          opt: [
            { label: "", value: "" },
            { label: "是", value: "T" },
            { label: "否", value: "F" },
          ],
        },
        // 通达地点
        regionRangeLike: {
          type: "Ipt",
          cName: "通达地点",
          cValue: "",
        },
        // 运维网号
        vpnNetNbr: {
          type: "Ipt",
          cName: "运维网号",
          cValue: "",
        },
        // 合同编码
        contactCd: {
          type: "jmIpt",
          cName: "合同编码",
          cValue: "",
          oValue: 0,
          opt: [
            { label: "精确", value: 0 },
            { label: "模糊", value: 1 },
          ],
        },
      },
      // 表格列表
      Dctbs: {
        tableColumns: [
          { type: "checkbox", width: 40, align: "center", fixed: "left" },
          {
            slotName: "operation",
            title: "操作",
            width: "8%",
            headerAlign: "center",
            fixed: "left",
            align: "center",
          },
          {
            field: "offerName",
            title: "销售品名称",
            fixed: "left",
            width: "8%",
          },
          {
            field: "custSoNumber",
            title: "流水号",
            width: "11%",
            fixed: "left",
            'class-name':'lshs'
          },
          { field: "accNum", title: "设备号", width: "9%", fixed: "left"},
          { field: "account", title: "接入号", width: "22%" },
          { slotName: "beginRentDate", title: "起租时间", width: "12%" },
          { field: "regionRange", title: "通达地点", width: "8%" },
          { field: "prodInstName", title: "甲端用户名称", width: "20%" },
          { field: "contactName", title: "甲端联系人", width: "10%" },
          { field: "contactPhone", title: "甲端联系人电话", width: "14%" },
          { field: "addressDesc", title: "甲端装机地址", width: "18%" },
          { field: "zProdInstName", title: "乙端用户名称", width: "20%" },
          { field: "zContactName", title: "乙端联系人", width: "10%" },
          { field: "zContactPhone", title: "乙端联系人电话", width: "14%" },
          { field: "zAddressDesc", title: "乙端装机地址", width: "18%" },
          { field: "rate", title: "速率", width: "6%" },
          { field: "groupNbr", title: "IDC群号", width: "8%" },
        ],
        tableData: [],
        tableLoading: false,
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
      },

      //服务弹窗配置
      popConfig: {
        modType: "50200003",
        name: "正常变更",
        placement: "bottom", //弹窗位置
        title: "", //弹窗标题
        width: "350", //弹窗宽度
        trigger: "click", //弹窗弹出方式 click/focus/hover/manual
        content: "", //弹窗内容
        // row:'',//表格行数据
        gutter: 10, //标签之间间隔
        span: 12, //每行标签个数，一行按24等分，12表示2个
      },

      morePopConfig: {
        modType: "50200003",
        name: "批量变更",
        placement: "bottom", //弹窗位置
        title: "", //弹窗标题
        width: "350", //弹窗宽度
        trigger: "click", //弹窗弹出方式 click/focus/hover/manual
        content: "", //弹窗内容
        // row:'',//表格行数据
        gutter: 10, //标签之间间隔
        span: 12, //每行标签个数，一行按24等分，12表示2个
      },

      moreRow: {},
    };
  },
  components: {
    DicTable,
    SimForm,
    DicPopover,
  },
  async created() {
    if(sessionStorage.getItem('proFlag') == '5G'){
      this.Form.prodId.cName = '销售品名称'
      await this.getOpt_5G();
    }else {
      await this.getOpt();
    }
    if (this.orderPosInfochange) {
      await this.getQryAssetDetail();
    }
  },
  mounted() {},
  computed: {
    ...mapState("orders", ["orderPosInfo"]),
    ...mapState("user", ["user"]),
    ...mapGetters(["orderPosInfochange"]),
  },
  watch: {
    orderPosInfochange: function () {
      this.getQryAssetDetail();
      this.Form = CommonUtil.formInit(this.Form);
    },
  },
  methods: {
    showTooltipMethod({ type, column, row, items, _columnIndex }) {
      const { property } = column;

      // 重写默认的提示内容
      // if (property === "addressDesc" || property === "zAddressDesc") {
      return row[property];
      // }
      // return null;
    },
    // 产品类型 prodId
    async getOpt() {
      let params = {
        interFaceType: "ORDER",
        sqlId: "2021071606",
        paramStr: "staffId:" + this.user.staffId,
      };
      const result = await OrderService.getCustNum(params);
      if (result.meta.resCode == "0") {
        let plist = result.meta.resList.executeSqlResps;
        plist.map((item, index) => {
          item.label = item.TEXT;
          item.value = item.VALUE;
          delete item.TEXT;
          delete item.VALUE;
        });
        plist.unshift({ label: "", value: "" });
        this.Form.prodId.opt = plist;
      }
    },
    // 销售品名称-5G
    async getOpt_5G() {
      let params = {
        interFaceType: "CPCP",
        sqlId: "20210707002",
        paramStr: "catalogItemId:7111",
      };
      const result = await OrderService.getCustNum(params);
      if (result.meta.resCode == "0") {
        let plist = result.meta.resList.executeSqlResp;
        plist.map((item, index) => {
          item.label = item.offer_name;
          item.value = item.offer_id;
          delete item.TEXT;
          delete item.VALUE;
        });
        console.log()
        plist.unshift({ label: "", value: "" });
        this.Form.prodId.opt = plist;
      }
    },
    // 查询列表
    async getQryAssetDetail() {
      if (!this.orderPosInfo.custId) {
        // 没选择客户时提示
        this.$confirm("请先选择客户！", "提示", {
          confirmButtonText: "知道了",
          type: "warning",
          showCancelButton: false,
          center: true,
        }).then((done) => {
          done();
        });
        return;
      }
      let msJson = {
        statusCds: "300098",
        createStaff: this.user.staffId,
        // handleOrgId: this.user.orgId,
        custId: this.orderPosInfo.custId,
        handleOrgId: this.user.orgId,
        // custOrderType: '50200005'
      };
      let param;
      if(sessionStorage.getItem('proFlag') == '5G'){
        let prodIdList = []
        this.Form.prodId.opt.forEach(ele => {
          if(ele.value){
            prodIdList.push(ele.value);
          }
        });
        let Form_5G = Object.assign({},this.Form);
        // Form_5G['prodIdList'] = Object.assign({},Form_5G.prodId);
        Form_5G['prodIds'] = Object.assign({},Form_5G.prodId);
        delete Form_5G.prodId;
        // Form_5G.prodIdList.cValue = Form_5G.prodIdList.cValue ? Form_5G.prodIdList.cValue : prodIdList.join(',');
        Form_5G.prodIds.cValue = Form_5G.prodIds.cValue ? Form_5G.prodIds.cValue : prodIdList.join(',');
        param = CommonUtil.paramsFun(
          0,
          Form_5G,
          "pageIndex",
          this.Dctbs.tablePage.currentPage,
          this.Dctbs.tablePage.pageSize
        );
      }else {
        param = CommonUtil.paramsFun(
          0,
          this.Form,
          "pageIndex",
          this.Dctbs.tablePage.currentPage,
          this.Dctbs.tablePage.pageSize
        );
      }
      this.Dctbs.tableLoading = true;
      const result = await OrderService.qryOfferInstList({
        ...msJson,
        ...param,
      });
      this.Dctbs.tableLoading = false;
      if (result.meta.resultCode == "0") {
        this.Dctbs.tableData = result.meta.offerInsts
          ? result.meta.offerInsts
          : [];
        this.Dctbs.tablePage.currentPage = result.meta.pageInfo
          ? JSON.parse(result.meta.pageInfo.pageIndex)
          : 1;
        this.Dctbs.tablePage.totalResult = result.meta.pageInfo
          ? JSON.parse(result.meta.pageInfo.rowCount)
          : 0;
      } else {
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: "error",
        });
      }
    },
    handlePageChange({ currentPage, pageSize }) {
      this.Dctbs.tablePage.currentPage = currentPage;
      this.Dctbs.tablePage.pageSize = pageSize;
      this.getQryAssetDetail();
    },
    //时间戳转换
    timestampToTime(timestamp) {
      let newTime =
        timestamp.substring(0, 4) +
        "-" +
        timestamp.substring(4, 6) +
        "-" +
        timestamp.substring(6, 8);
      return newTime;
    },
    Onrowclick(data) {
      sessionStorage.setItem("changeRow", JSON.stringify(data.row));
      if (data.column.title == "流水号") {
        const ppmCondition = {
          productId: data.row.prodId ? data.row.prodId : 80008007,
          serviceOfferId: "4010100000",
          modType: "50200003",
          optionId: "314", //需求单审核前后/订单审核前后/产品实例库  310，311，312，313，314
        };
        sessionStorage.setItem("ppmCondition", JSON.stringify(ppmCondition));
        sessionStorage.setItem("detailCondition", JSON.stringify(ppmCondition)); //解决详情刷新缓存请求条件被覆盖问题
        window.open("orders.html?router=productinfo", "_blank");
      }
    },

    checkBoxdata(data, checked) {
      //表格复选框事件


      let orderItemId = [];
      let offerInstId = [];
      let accNum = [];
      for (let i = 0; i < data.length; i++) {
        this.moreRow.prodId = data[0].prodId;
        if (data[i].prodId == this.moreRow.prodId) {
          orderItemId.push(data[i].orderItemId);
          offerInstId.push(data[i].offerInstId);
          accNum.push(data[i].accNum || "");
          this.moreRow.lastStateCd = data[i].lastStateCd;
          this.moreRow.custId = data[i].custId;
          this.moreRow.custSoNumber = data[i].custSoNumber;
          this.moreRow.offerId = data[i].offerId;
          this.moreRow.lastOrderItemId = data[i].lastOrderItemId;
        } else {
          this.$alert("只能选择相同产品ID的单子", "警告", {
            type: "warning",
            confirmButtonText: "关闭",
          });
          checked = false;
        }
      }
      this.moreRow.orderItemId = orderItemId.toString();
      this.moreRow.offerInstId = offerInstId.toString();
      this.moreRow.accNum = accNum.toString();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .vxe-cell--label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
}
.sale-case-box {
}
.radio-mt {
  margin-top: 0.1rem;
}
.select-box {
  width: 1rem;
  padding: 0;
}
.ne-biangeng {
  color: blue;
  &:hover {
    color: blue;
    text-decoration: underline;
  }
}
.ne-operation-a {
  color: $blue;
  &:hover {
    text-decoration: underline;
    color: $blue;
  }
}
.operation {
  width: 100%;
  padding: 0 10px !important;
  height: 0.34rem;
  box-sizing: border-box;
  position: absolute;
  top: 20%;
  left: 0;
  .position {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
  }
}
.plbg {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
}

::v-deep .lshs{
  color: #2A83E2;
  cursor: pointer;
}
</style>
